<template>
  <div class="seismic_container">
    <div class="card-title flex justify-between pr-4">
      <div>项目统计</div>
      <div class="page_config">
        <Button @click="onPre" :disabled="_num <= 0" class="left">
          <template #icon>
            <CaretLeftOutlined />
          </template>
        </Button>
        <Button @click="onNext" :disabled="(_num + 1) * 6 >= _total">
          <template #icon>
            <CaretRightOutlined />
          </template>
        </Button>
      </div>
    </div>
    <div id="project" ref="project"></div>
  </div>
</template>

<script lang="tsx" setup>
import { computed, nextTick, ref } from 'vue';
import { CaretLeftOutlined, CaretRightOutlined } from '@ant-design/icons-vue';
import { Button } from 'ant-design-vue';
import * as echarts from 'echarts';
import 'echarts/theme/macarons';
import { getProject } from '@/api/home';

const onPre = () => {
  if (_num.value <= 0) return;
  _num.value--;
  nextTick(() => {
    init();
  });
};
const onNext = () => {
  if ((_num.value + 1) * 6 >= _total.value) return;
  _num.value++;
  nextTick(() => {
    init();
  });
};
const dataInfo: any = ref([]);
const xAxis: any = ref([]);
const _num = ref(0);
const _total = ref(0);
const _xAxis = computed(() => {
  const data = xAxis.value.slice(_num.value * 6, _num.value * 6 + 6);
  return data;
});
const _dataInfo = computed(() => {
  const data = dataInfo.value.slice(_num.value * 6, _num.value * 6 + 6);
  return data;
});

const maxValue = computed(() => {
  const max = Math.max(..._dataInfo.value);
  const max2 = Math.max(...dataInfo.value);
  return max || max2 || 10;
});

let chart: any;
const getProjectFn = async () => {
  const res: any = await getProject();
  _total.value = res.data.length;
  if (res.code == 200) {
    // let _arr = res.data.sort((a: any, b: any) => {
    //   return b.count - a.count;
    // });
    let _arr = res.data;
    _arr.forEach((item: any) => {
      dataInfo.value.push(item.count);
      xAxis.value.push(item.name);
    });
    _num.value = 0;
    nextTick(() => {
      init();
    });
  }
};

const extension = (chart: any) => {
  var elementDiv = document.getElementById('extension');
  if (!elementDiv) {
    var div = document.createElement('div');
    div.setAttribute('id', 'extension');
    div.style.display = 'block';
    document.querySelector('html').appendChild(div);
  }
  chart.on('mouseover', function (params) {
    if (params.componentType == 'yAxis') {
      var elementDiv = document.querySelector('#extension');
      //设置悬浮文本的位置以及样式
      var elementStyle =
        'position: absolute;z-index: 99999;color: #000;font-size: 12px;padding: 5px;display: inline;border-radius: 4px;background-color: #fff;box-shadow: rgba(0, 0, 0, 0.3) 2px 2px 8px';
      elementDiv.style.cssText = elementStyle;
      elementDiv.innerHTML = params.value;
      document.querySelector('html').onmousemove = function (event) {
        var elementDiv = document.querySelector('#extension');
        var xx = event.pageX - 10;
        var yy = event.pageY + 15;
        elementDiv.style.top = yy + 'px';
        elementDiv.style.left = xx + 'px';
      };
    }
  });
  chart.on('mouseout', function (params) {
    //注意这里，我是以X轴显示内容过长为例，如果是y轴的话，需要改为yAxis
    if (params.componentType == 'yAxis') {
      var elementDiv = document.querySelector('#extension');

      elementDiv.style.cssText = 'display:none';
    }
  });
};

const init = () => {
  if (chart) {
    chart.clear();
    chart.dispose();
  }
  chart = echarts.init(document.getElementById('project'));
  let total = 0;
  let bgData = [];

  dataInfo.value.forEach((item: any) => {
    total += item;
  });
  dataInfo.value.forEach((item: any) => {
    bgData.push(total);
  });

  let option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
      },
    },
    grid: [
      {
        top: '15%',
        left: '15%',
        bottom: '20%',
      },
    ],
    yAxis: {
      triggerEvent: true,
      type: 'category',
      splitLine: {
        show: false,
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: 'rgba(255, 255, 255, 0.14)',
        },
      },
      axisLabel: {
        interval: 0,
        color: '#8c8c8c',
        formatter: (value: any) => {
          if (value.length > 4) {
            // 假设超过4个字符就显示省略号
            return value.slice(0, 4) + '...'; // 显示前5个字符并添加省略号
          }
          return value;
        },
      },
      data: _xAxis.value,
    },
    xAxis: {
      position: 'top',
      type: 'value',
      max: maxValue.value,
      min: 0,
      splitLine: {
        show: true,
        lineStyle: {
          type: 'dashed',
          color: '#EBEBEB',
        },
      },
      axisLabel: {
        show: true,
        color: '#8c8c8c',
      },
      axisTick: {
        show: false,
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: 'rgba(255, 255, 255, 0.14)',
        },
      },
    },
    series: [
      {
        type: 'bar',
        data: _dataInfo.value,
        barWidth: 20,
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
              {
                offset: 0,
                color: '#007ADF',
              },
              {
                offset: 1,
                color: '#fff',
              },
            ]),
          },
        },
        label: {
          show: false,
          position: 'top',
          color: '#040C14',
          distance: 10,
        },
      },
    ],
  };
  chart.setOption(option);
  extension(chart);
  addEventListener('resize', function () {
    chart.resize();
  });
};

getProjectFn();
</script>

<style lang="scss" scoped>
@use '../style.scss';
#project {
  height: calc(100% - 4vh);
}
.page_config {
  .left {
    margin-right: 1vh;
  }
}
</style>
